<template>
  <cfDialog :dialogObj='inputDialogObj'>
    <template slot='content'>
      <div class="inputDialog" v-loading="loading">
        <el-form :model="searchParams" ref="searchParams" :label-width="device=='mobile'?'68px':''" size="small">
          <el-row :gutter="20">
            <el-col  v-for="(item, index) in inputDialogObj.tableDataObj.searchArea" :key="index" :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item :prop="item.value" :label="device=='mobile'?item.label:''">
                <el-input v-model="searchParams[item.value]" v-if="item.type == 'input'" :placeholder="`请输入${item.label}`" clearable @change="(val)=>handleChange(val, item.value)" v-search="handleSearch"></el-input>
                <el-select v-model="searchParams[item.value]" v-else-if="item.type == 'select'" :placeholder="`请选择${item.label}`" clearable @change="(val)=>handleChange(val, item.value)" v-search="handleSearch">
                  <el-option v-for="dict in item.list" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="device !== 'mobile'" :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        
        <el-table ref="table" :data="tableData" stripe @selection-change="handleSelection" @row-click="rowClick" height="320px">
          <el-table-column v-if="!inputDialogObj.tableDataObj.multiple" width="56" label="单选" align="center">
            <el-radio slot-scope="{row}" v-model="checkedId" :label="row[inputDialogObj.tableDataObj.id]"><span></span></el-radio>
          </el-table-column>
          <el-table-column v-else type="selection" width="64" align="center"></el-table-column>
          <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
          <el-table-column v-for="column in inputDialogObj.tableDataObj.option" :key="column.id" :width="column.width" :min-width="column.minWidth" :label="column.label" show-overflow-tooltip :prop="column.prop"></el-table-column>
        </el-table>
        <pagination v-show="pageParams.total" :total='pageParams.total' :page.sync='pageParams.pageNum' :limit.sync='pageParams.pageSize' @pagination='getListFn'/>
      </div>
    </template>
    <template slot='footer'>
      <el-button type='primary' v-if="!loading" size='small' @click='handleConfirm'>确定</el-button>
    </template>
  </cfDialog>
</template>
<script>
export default {
  props: {
    inputDialogObj: {
      type: Object,
      default: ({
        visible: false,
        title: '',
        width: '538px',
        tableDataObj: {
          id: 'id',
          multiple: true,
          apiFn: '',
          params: {},
          searchArea: [],
          option: [
            {id: 1, label: '名称', prop: 'roomFullName'},
            {id: 2, label: '面积', prop: 'roomArea'},
          ]
        }
      })
    }
  },
  data() {
    return {
      tableData: [],
      searchParams: {

      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      checkedId: '', /**单选数据 */
      checkedList: [], /**选中数据 */
      loading: true, /**加载控件 */
    }
  },
  computed: {
    device() {
      return this.$store.getters.device;
    }
  },
  created() {
    if(this.inputDialogObj.tableDataObj.apiFn) this.getListFn();
  },
  methods: {
    async getListFn() {
      const data = {
        ...this.searchParams,
        ...this.inputDialogObj.tableDataObj.params
      }
      this.loading = true;
      const res = await this.inputDialogObj.tableDataObj.apiFn(data, this.pageParams);
      if(res.code == 200) {
        this.tableData = res.rows;
        this.pageParams.total = res.total;
      }
      setTimeout(() => {
        this.loading = false
      }, 500);
    },
    /**确定按钮提交功能*/
    handleConfirm() {
      if(!this.checkedList.length) {
        this.$message.warning("当前未选中数据")
        return;
      }
      this.inputDialogObj.visible = false;
      this.$emit('handleResult', this.checkedList);
    },
    handleSelection(selection) {
      this.checkedList = selection;
    },
    rowClick(row) {
      if(!this.inputDialogObj.tableDataObj.multiple) {
        this.checkedId = row[this.inputDialogObj.tableDataObj.id];
        this.checkedList = [row];
      } else {
        let flag = true;
        if(this.checkedList.some(item=>item[this.inputDialogObj.tableDataObj.id] == row[this.inputDialogObj.tableDataObj.id])) {
          flag = false;
        }
        this.$refs.table.toggleRowSelection(row, flag);
      }
    },
    handleSearch() {
      this.pageParams.pageNum = 1;
      this.pageParams.pageSize = 10;
      this.getListFn();
    },
    handleReset() {
      this.$refs.searchParams.resetFields();
      this.handleSearch();
    },
    handleChange(val, key) {
      console.log(val, key);
      this.$set(this.searchParams, key, val)
    }
  }
}
</script>

<style lang="scss">
.inputDialog {
  .el-table {
    .el-table__header-wrapper {
      position: initial !important;
    }
    .cell{
      line-height: 36px;
    }
  }
}
</style>